<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {doGet, doPost, doPut} from "../../util/request.js";
import {showMessage} from "../../util/message.js";
//创建路由对象
const router = useRouter()
//路由参数对象
const route = useRoute()
//表单数据 user对象
const user = ref({})
//表单提交对象
const userRuleFormRef = ref()
//表单验证规则
const userFormRules = ref({
  loginAct: [
    {required: true, message: '请输入登录帐号', trigger: 'blur'},
    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
  ],
  loginPwd: [
    {required: true, message: '请输入登录密码', trigger: 'blur'},
    {min: 6, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},
    { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/, message: '密码由6-20位数字和字母组成', trigger: 'blur'}
  ],
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入手机号码', trigger: 'blur'},
    {min: 11, max: 11, message: '长度为11位', trigger: 'blur'},
    { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ],
  email: [
    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
  ],
  accountNoExpired: [
    {required: true, message: '请选择', trigger: 'change'},
  ],
  credentialsNoExpired: [
    {required: true, message: '请选择', trigger: 'change'},
  ],
  accountNoLocked: [
    {required: true, message: '请选择', trigger: 'change'},
  ],
  accountEnabled: [
    {required: true, message: '请选择', trigger: 'change'},
  ]

})
//提交表单
const submit = (formRef) => {
  if (!formRef) return
  formRef.validate((valid) => {
    if (valid) {
      //获取路径参数
      let id = route.params.id
      //准备参数
      let params = {
        id: id,
        ...user.value
      }
      console.log('提交表单',params)
      if(id){
        //修改
        doPut('/api/user',params).then(resp => {
          if (resp.data.code === 200) {
            showMessage("修改成功","success")
            //跳转到用户列表页面
            router.back()
          }else {
            showMessage("修改失败"+resp.data.msg,"error")
          }
        })
      }else {
        //新增
        doPost('/api/user',params).then(resp => {
          if (resp.data.code === 200) {
            showMessage("新增成功","success")
            //跳转到用户列表页面
            router.back()
          }else {
            showMessage("新增失败"+resp.data.msg,"error")
          }
      })
      }
    }
  })
}
//重置表单
const resetForm = (formRef) => {
  if (!formRef) return
  formRef.resetFields()
}
//查询用户信息
const loadUserInfo = (id) => {
  doGet('/api/user/infoUser1/'+id,{}).then(resp => {
    if (resp.data.code === 200) {
      user.value = resp.data.data
    }else {
      showMessage("查询失败"+resp.data.msg,"error")
    }
  })
}
onMounted(()=>{
  // 获取路由参数用户标识
  let id = route.params.id
  // 判断用户id是否有值
  if (!id) return
  // 查询编辑用户的信息
  loadUserInfo(id)
})

// 下拉框数据
const options = ref([
  {
    value: 1,
    label: '否'
  },
  {
    value: 0,
    label: '是'
  }
])
</script>

<template>
<h1 v-if="user.id">修改信息</h1>
<h1 v-else>新增用户</h1>
  <div class="demo-ruleForm">
  <el-form
      ref="userRuleFormRef"
      style="max-width: 600px;"
      :model="user"
      label-width="auto"
      :rules="userFormRules"
      class="demo-ruleForm">

    <el-form-item label="帐号" prop="loginAct">
      <el-input v-model="user.loginAct" />
    </el-form-item>

    <el-form-item label="登录密码" prop="loginPwd" v-if="!user.id">
      <el-input type="password" v-model="user.loginPwd" />
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="user.name" />
    </el-form-item>

    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="user.phone" />
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email" />
    </el-form-item>

    <el-form-item label="帐号是否过期" prop="accountNoExpired">
      <el-select v-model="user.accountNoExpired" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="密码是否过期" prop="credentialsNoExpired">
      <el-select v-model="user.credentialsNoExpired" placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="帐号是否锁定" prop="accountNoLocked">
      <el-select v-model="user.accountNoLocked" placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="帐号不可用" prop="accountEnabled">
      <el-select v-model="user.accountEnabled" placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label=" ">
      <el-button type="primary" @click="submit(userRuleFormRef)">提交</el-button>
      <el-button @click="resetForm(userRuleFormRef)">重置</el-button>
      <el-button @click="router.back()">返回</el-button>
    </el-form-item>

  </el-form>
  </div>
</template>

<style scoped>
.demo-ruleForm{
  margin-left: 170px;
  margin-top: 100px;
}
.el-button{
  margin-left: 60px;
}
h1{
  text-align: center;
  font-size: 30px;
}
</style>